<template>
    <div v-if='rowsData.length > 0' :class='$style.msg'>
        <div v-for='(item, index) in rowsData' :key='item.id' :class='[$style.item, item.status == 1 ? $style.had : $style.no]'>
            <div v-if='!item.open' :class='[$style.title, $style.s]' @click='e => open(e, index)'>{{item.content}}</div>
            <div v-else :class='[$style.title]'>{{item.content}}<span :class='$style.close' @click='close(index)'> 收起<ArrowUpOutlined /></span></div>
            <!-- <div class='m-t-5' v-if='item.open'>
                <template v-if='item.loading'>
                    <a-skeleton active :title='false' :paragraph='{rows : 2}' />
                </template>
                <template v-else>{{item.content}}  <span :class='$style.close' @click='close(index)'>收起<ArrowUpOutlined /></span></template>
            </div> -->
            <div :class='$style.date'>{{item.create_at}}</div>
        </div>
    </div>
    <div class='m-t-20'>
        <XPagination :show-loading='true' :api='pageApi' @finish='pageFinish' />
    </div>
</template>

<script lang='ts' setup>
    import { reactive, ref } from 'vue'
    import { ArrowUpOutlined } from '@ant-design/icons-vue'
    import { messageApi, msgDetailApi } from '@/api/user'
import { useStore } from 'vuex'
    
    const $store = useStore()
    
    const rowsData = reactive([])

    async function pageApi(params:any) {
        const res = await messageApi({...params})
        return res
    }

    function open(e, index:number) {
        const el = e.target
        const style = getComputedStyle(el.parentNode)
        const width = el.parentNode.clientWidth - parseInt(style.paddingInlineStart) - parseInt(style.paddingInlineEnd)

        const row = rowsData[index]

        if(el.clientWidth >= width) {
            if(row.open) return

            row.open = true
        }

        
        
        if(row.status == 2) {
            row.status = 1
            if($store.state.msgCount > 0) $store.commit('setMsgCount', $store.state.msgCount - 1)
        }

        

        
    }

    function close(index:number) {
        rowsData[index].open = false
    }

    function pageFinish(rows) {
        rowsData.splice(0)
        rows.forEach(row => {
            row.open = false
            row.loading = false
            rowsData.push(row) 
        })
        
    }
</script>

<style scoped module lang='scss'>
    .msg{
        border: 1px solid $border-color;
        max-width: 100%;
        overflow: hidden;
        .item{
            padding:10px 15px;
            border-bottom: 1px solid $border-color;
            max-width: 100%;
            overflow: hidden;
            
            &:last-child{
                border-bottom: none;
            }

            &.had{
                background:#fbfdff;
            }

            &.no{
                background:#f1f9ff;
            }

            .title{
                font-size: 16px;
                text-align: justify;
                cursor: pointer;

                &.s{
                    display: inline-block;
                    max-width: 100%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis
                }
            }

            .date{
                font-size: 12px;
                color: #999;
                margin-top: 5px;
            }

            .close{
                cursor: pointer;
                color: $primary-color;
            }
        }
    }
</style>